<template>
	<view style="padding: 20rpx">
		<uni-data-picker placeholder="请选择相册" popup-title="请选择相册" :localdata="dataTree" v-model="id" @change="onchange"></uni-data-picker>
		<!-- 魔法相册弹窗 -->
		<view class="dialog">
			<u-popup :show="choosefile" :round="18" mode="center" @close="closepop">
				<view class="content">
					<view class="content-title">操作</view>
					<view class="content-item" v-if="type == 0">
						<view class="u-demo-block__title">选择照片</view>
						<view class="u-demo-block__content">
							<u-upload :fileList="img" accept="image" @afterRead="afterRead" @delete="deletePic" :capture="['album']" name="3" multiple :maxCount="9"></u-upload>
						</view>
					</view>

					<view class="content-item" v-if="type == 1">
						<view class="u-demo-block__title">
							选择照片
							<text>（必选且只能选择一张照片）</text>
						</view>
						<view class="u-demo-block__content">
							<u-upload :fileList="img" accept="image" @afterRead="afterRead" @delete="deletePic" name="1" :capture="['album']" :maxCount="1"></u-upload>
						</view>
					</view>
					<view class="content-item" v-if="type == 1">
						<view class="u-demo-block__title">
							选择视频
							<text>（必选且只能选择一个视频）</text>
						</view>
						<view class="u-demo-block__content">
							<u-upload :fileList="video" accept="video" @afterRead="afterRead" @delete="deletePic" name="2" :capture="['album']" :maxCount="1"></u-upload>
						</view>
					</view>
				</view>
				<!-- 按钮集合 -->
				<view class="button_box">
					<view class="left_button" @tap="back">上一步</view>
					<view class="right_button" @tap="affirm">完成</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
import uniDataPicke from '@/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue';
export default {
	components: { uniDataPicke },
	data() {
		return {
			img: [],
			video: [],
			data: null,
			show: false,
			choosefile: false,
			dataTree: [
				{ text: '我的相册', value: 0, children: [] },
				{ text: '魔法相册', value: 1, children: [] }
			],
			arr1: [], ///普通相册
			arr2: [], //魔法相册
			id: '',
			type: 0 //
		};
	},
	onLoad() {
		this.getPhotoList();
	},
	methods: {
		onchange(e) {
			this.type = e.detail.value[0].value;
			this.choosefile = true;
		},
		//  获取相册信息
		async getPhotoList() {
			let res = await this.$http.get('/app/xc/getSyXc');
			if (res.code == 0) {
				res.list.forEach((item, index) => {
					if (item.lx == 0) {
						this.arr1.push(item);
					}
					if (item.lx == 1) {
						this.arr2.push(item);
					}
				});
				this.dataTree[0].children = this.arr1.map((i) => {
					return { text: i.mc, value: i.id };
				});
				this.dataTree[1].children = this.arr2.map((i) => {
					return { text: i.mc, value: i.id };
				});
			}
		},

		// 删除图片
		deletePic(e) {
			console.log(e);
			if (e.name == '3') {
				this.img.splice(event.index, 1);
			} else if (e.name == '1') {
				this.img = [];
			} else {
				this.video = [];
			}
		},
		// 新增图片
		async afterRead(e) {
			if (this.type == 0) {
				this.img = e.file;
			} else {
				if (e.name == '1') {
					this.img = [e.file];
				} else {
					this.video = [e.file];
				}
			}
		},

		back() {
			this.img = [];
			this.video = [];
			this.choosefile = false;
		},
		async affirm() {
			try {
				if (this.img.length == 0) {
					this.toast('请上传图片');
				} else if (this.video == 0 && this.type == 1) {
					this.toast('请上传视频');
				} else {
					this.showLoading('上传中');
					if (this.type == 0) {
						for (let item of this.img) {
							await this.$uploadFile('/app/tp/uploadFile', item.url, {
								sfar: 0,
								flid: this.id
							});
						}
					} else {
						let imgRes = await this.$uploadFile('/app/tp/uploadMf', this.img[0].url, {
							sfar: 1,
							flid: this.id
						});
						let imgId = imgRes.tp.id;
						let videoRes = await this.$uploadFile('/app/tp/uploadMf', this.video[0].url, {
							sfar: 1,
							flid: this.id
						});
						let videoId = videoRes.tp.id;
						await this.$http.post('/app/tp/addMf', {
							spid: videoId,
							tpid: imgId
						});
					}

					this.hideLoading('上传完成');
					this.choosefile = false;
					uni.navigateBack();
				}

			} catch (e) {
				this.errorLoading(e);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.wrap {
	width: 94%;
	margin: 0 auto;
}
:deep(.page-body) {
	width: 100%;
	flex: 1;
	background: #fff !important;
}
.content {
	width: 650rpx;
	margin: 0rpx auto;
	&-title {
		height: 90rpx;
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;
		justify-content: center;
	}
	&-item {
		padding-left: 30rpx;
		.u-demo-block__title {
			height: 60rpx;
			display: flex;
			align-items: center;
			font-weight: 600;
			font-size: 28rpx;
			color: #333;
			text {
				font-weight: 500;
				font-size: 24rpx;
				color: #666;
			}
		}
	}
}
// 按钮集合
.button_box {
	display: flex;
	padding: 20rpx 0 30rpx;
	.left_button {
		width: 50%;
		height: 72rpx;
		text-align: center;
		line-height: 72rpx;
		border-radius: 45rpx;
		border: 1rpx solid #34c37f;
		font-family: PingFangSC;
		color: #34c37f;
		font-weight: 500;
		font-size: 28rpx;
		font-style: normal;
		text-decoration: none;
		margin-left: 40rpx;
		margin-right: 20rpx;
	}

	.right_button {
		width: 50%;
		height: 74rpx;
		text-align: center;
		line-height: 74rpx;
		border-radius: 45rpx;
		background-image: linear-gradient(90deg, #68db95 0, #5ec39b 100%);
		color: #ffffff;
		font-weight: 500;
		font-size: 28rpx;
		font-style: normal;
		text-decoration: none;
		margin-right: 40rpx;
		margin-left: 20rpx;
	}
}
</style>
